//参数监控(高炉)
<template>
    <div>
        <div class="header">
            <div>
                <select name="" id="">
                    <option value="7">
                        7高炉
                    </option>
                    <option value="6">
                        6高炉
                    </option>
                </select>
            </div>
            <div>
                <i class="fa fa-heart" aria-hidden="true"></i>
            </div>
            <div>
                <mt-navbar v-model="selected">
                    <mt-tab-item id="1">操作</mt-tab-item>
                    <mt-tab-item id="2">原料</mt-tab-item>
                    <mt-tab-item id="3">炉况</mt-tab-item>
                    <mt-tab-item id="4">安全</mt-tab-item>
                </mt-navbar>
            </div>
        </div>
        <mt-cell v-for="(item ,index) in data"
                 :key="index"
                 :title="item.title"
                 :label="item.label"
                 :value="item.value"
                 @click.native="open"
                 is-link>
        </mt-cell>

        <mt-popup v-model="popupVisible" class="popup">
            <mt-header>
                <mt-button slot="left" icon="back" v-on:click="close">返回</mt-button>
            </mt-header>
            <div class="pop-content-header">
                <mt-navbar v-model="selectedTime" class="mt-tab-item">
                    <mt-tab-item id="time">分时</mt-tab-item>
                    <mt-tab-item id="day">日</mt-tab-item>
                    <mt-tab-item id="week">周</mt-tab-item>
                    <mt-tab-item id="month">月</mt-tab-item>
                    <mt-tab-item id="5">...</mt-tab-item>
                </mt-navbar>
            </div>
            <div class="pop-container flex-1 flex-center">
                <div>
                    当前值：{{current}}
                </div>
                <div>
                    <div>
                        最大值{{max}}
                    </div>
                    <div>
                        最小值{{min}}
                    </div>
                </div>
                <div>
                    <div>
                        均值{{aver}}
                    </div>
                    <div>
                        波动{{wave}}
                    </div>
                </div>
            </div>

            <div>
                <h3 class="title">
                    <span>
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                    <i class="fa fa-bell-o" aria-hidden="true"></i>
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                    </span></h3>
                <div id="chart" class="charts"></div>
            </div>
            <div class="remind">
                提醒关注K值变化
            </div>
        </mt-popup>
    </div>
</template>

<script>
      import echarts from "echarts";

    export default {
        name: "furnaceParams",
        data() {
            return {
                current: 98,
                max: 98,
                min: 98,
                aver: 98,
                wave: 98,
                selected: "",
                selectedTime: "time",
                popupVisible: false,
                height_data: [80, 80, 80, 80, 80, 80, 80, 80, 80],
                low_data: [50, 50, 50, 50, 50, 50, 50, 50, 50],
                actual_data: [40, 50, 60, 70, 75, 76, 77, 55, 90],
                data_x: ['2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09', '2018/01/10'],
                data: [
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    },
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    },
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    },
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    },
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    },
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    },
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    },
                    {
                        title: "入炉品位",
                        label: "150℃",
                        value: "120-200"
                    }
                ]
            };
        },
        methods: {
            open: function () {
                this.popupVisible = true;
                this.$nextTick(() => {
                    this.myChart_k.resize();
                })
            },
            close: function () {
                this.popupVisible = false;
            }
        },
        mounted() {
            this.$nextTick(() => {
                const myChart_k =  this.myChart_k = echarts.init(document.getElementById("chart"));

                const option_k = {
                    title: {
                        text: 'K1',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data_x,
                        axisLabel: {
                            rotate: 50
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '最高',
                            type: 'line',
                            stack: '总量',
                            data: this.height_data
                        },
                        {
                            name: '最低',
                            type: 'line',
                            stack: '总量',
                            data: this.low_data
                        },
                        {
                            name: '实际值',
                            type: 'line',
                            stack: '总量',
                            data: this.actual_data
                        }
                    ]

                };
                myChart_k.setOption(option_k);

            })
        }
    };
</script>

<style lang="scss" scoped>
    .header {
        display: flex;
        align-items: center;
        & > div {
            flex: 1;
        }
        div:nth-child(2) {
            text-align: center;
        }
        div:nth-child(3) {
            flex: 4;
        }
    }

    .popup {
        width: 100%;
        height: 100vh;
        overflow: auto;
    }

    .title {
        text-align: center;
        span {
            float: right;
        }
    }

    .remind {
        height: 200px;
        background: #ccc;
        margin-top: 30px;
    }
    .charts{
        width: 100%;
        height: 300px;
    }
</style>
